<template>
  <div class="subindex">
    <!-- 面包屑 -->
    <bread-view>
      <bread-item :to="'/'">首页</bread-item>
      <bread-item :to="`/cate?id=${breadobj.onecateid}`">
        {{ breadobj.onecatename }}
      </bread-item>
      <bread-item>{{ breadobj.twocatename }}</bread-item>
    </bread-view>
    <!-- 属性展示区 -->
    <div class="sub-filter" v-if="attr.length != 0">
      <div class="item">
        <div class="head">品牌：</div>
        <div class="body">
          <a
            href="javascript:;"
            :class="{ active: item.id == brandid }"
            v-for="item in brandattr"
            :key="item.id"
            @click="setBrand(item.id)"
          >
            {{ item.name }}
          </a>
        </div>
      </div>
      <div class="item" v-for="(item, key) in attr" :key="item.id">
        <div class="head">{{ item.name }}</div>
        <div class="body">
          <a
            href="javascript:;"
            v-for="it in item.properties"
            :key="it.id"
            :class="{ active: changeattr[key] && it.id == changeattr[key].id }"
            @click="setchangeattr(key, item.name, it.name, it.id)"
          >
            {{ it.name }}
          </a>
        </div>
      </div>
    </div>
    <!-- 骨架屏 -->
    <div v-if="attr.length == 0">
      <skeleon-view width="900px" height="20px"></skeleon-view>
      <skeleon-view width="800px" height="20px"></skeleon-view>
      <skeleon-view width="700px" height="20px"></skeleon-view>
      <skeleon-view width="600px" height="20px"></skeleon-view>
    </div>
    <!-- {{sortField}}--{{sortMethod}} -->
    <!-- 排序展示区 -->
    <!-- <shi-view></shi-view> -->
    <div class="sortview">
      <div class="left">
        <section class="radio" v-for="(item, key) in radioarea" :key="key">
          <input
            type="radio"
            name="sortarea"
            :value="item.val"
            v-model="sortField"
            :id="key"
            @click="sortMethod = null"
          />
          <label :for="key">{{ item.name }}</label>
        </section>
        <section class="pricesort" @click="setPriceSort()">
          价格排序
          <i class="arrow up" :class="{ active: sortMethod == 'asc' }"></i>
          <i class="arrow down" :class="{ active: sortMethod == 'desc' }"></i>
        </section>
      </div>
      <div class="right">
        <check-box :val.sync="inventory" :title="'have'"
          >仅显示有货商品</check-box
        >
        <check-box :val.sync="onlyDiscount" :title="'cheap'"
          >仅显示特惠商品</check-box
        >
      </div>
    </div>
    <!-- 结果展示区 -->
    <!-- <div class="aa"> -->
    <goods-view :item="goodslist"></goods-view>
    <!-- </div> -->
    <!-- 加载区 -->
    <infinite-loading
      :finished="finished"
      :loading="loading"
      @getdata="getData"
    ></infinite-loading>
  </div>
</template>
<script>
//面包屑组件
import BreadView from "@/components/utils/Bread/BreadView";
import BreadItem from "@/components/utils/Bread/BreadItem";
//api方法
import { cateFilter, getGoods } from "@/utils/api/categoryapi";
//引入骨架屏
import SkeleonView from "@/components/utils/SkeleonView.vue";
import ShiView from "./ShiView.vue";
import GoodsView from "../category/GoodsView.vue";
import InfiniteLoading from "../utils/InfiniteLoading.vue";
import CheckBox from "./CheckBox.vue";
export default {
  components: {
    BreadView,
    BreadItem,
    SkeleonView,
    ShiView,
    GoodsView,
    InfiniteLoading,
    CheckBox,
  },
  data() {
    return {
      //面包屑
      breadobj: {
        twocatename: null,
        onecatename: null,
        onecateid: null,
      },
      //选择品牌
      brandattr: [],
      //属性
      attr: [],
      loading: false, //正在加载中
      finished: false, //是否已经加载完成

      query: {
        categoryId: null,
        page: 1,
        pageSize: 20,
      },
      goodslist: [],
      brandid: null, //当前选中的品牌id
      changeattr: [],
      //排序按钮数据
      radioarea: [
        { val: "publishTime", name: "默认排序" },
        { val: "orderNum", name: "最新商品" },
        { val: "price", name: "最高人气" },
        { val: "evaluateNum", name: "评论最多" },
      ],
      //点哪个排序
      sortField: "publishTime", //点按个哪个排序
      sortMethod: "", //排序方式
      inventory: false, //是否有库存
      onlyDiscount: false, //是否显示特惠
    };
  },
  computed: {
    cate() {
      return this.$store.state.category.cate;
    },
  },
  mounted() {
    //给query赋值
    this.query.categoryId = this.$route.query.id;
    this.getData();
  },
  watch: {
    $route: {
      async handler(val) {
        if (val) {
          //调用方法
          this.setBread();
          //调用属性获取方法
          await this.getAttr(this.$route.query.id);
          //设置选择的数组
          var obj = { groupName: null, propertyName: null, id: null };
          this.changeattr = [];
          //遍历attr的数组
          for (var i = 0; i < this.attr.length; i++) {
            this.changeattr.push(obj);
          }
          // console.log(this.changeattr)
        }
      },
      deep: true,
      immediate: true,
    },
    //检测排序方式变化
    sortField(val) {
      //设置条件
      if (val == "price") {
        this.query.sortField = val;
        this.query.sortMethod = this.sortMethod;
      } else {
        this.query.sortField = val;
        this.query.sortMethod = null;
      }
      //设置成第一页
      //请求数据
      this.resetgetdata();
    },
    //监听属性选择
    changeattr(val) {
      //过滤出id为null的数据不发请求
      var attr = val.filter((item) => {
        return item.id != null;
      });
      //连接this.query发请求
      this.query = { ...this.query, ...{ attr } };
      this.goodslist = [];
      if (attr.length != 0) {
        this.getData();
      }
    },
    //价格监听  val  oldval
    sortMethod(val, oldval) {
      //从desc  或者 asc 变成空的时候不发请求
      if (val == null) {
        return false;
      }
      //从空 到desc的时候在前面已经发过请求  可以不发请求
      if (oldval != null) {
        this.query.sortMethod = val;
        this.resetgetdata();
      }
    },
    //有没有货
    onlyDiscount(val) {
      // console.log(val);
      this.query.onlyDiscount = val;
      this.resetgetdata();
    },
  },
  methods: {
    //重置请求参数
    resetgetdata() {
      this.query.page = 1;
      this.goodslist = [];
      this.getData();
    },
    //面包屑方法
    setBread() {
      for (var i = 0; i <= this.cate.length - 1; i++) {
        var index = this.cate[i].children.findIndex((item) => {
          return item.id == this.$route.query.id;
        });
        if (index != -1) {
          this.breadobj.twocatename = this.cate[i].children[index].name;
          this.breadobj.onecatename = this.cate[i].name;
          this.breadobj.onecateid = this.cate[i].id;
          //this.$set(this.breadobj,"twocatename",obj.twocatename)
          break;
        }
      }
    },
    //筛选的数据
    async getAttr(id) {
      let res = await cateFilter(id);
      //   console.log(res);
      this.brandattr = res.result.brands;
      //需要给brandattr 在头部添加一个全部空数据
      let obj = { id: null, name: "全部" };
      this.brandattr.unshift(obj);
      this.attr = res.result.saleProperties;
      this.attr.forEach((item) => {
        item.properties.unshift(obj);
      });
    },
    //价格排序区域
    setPriceSort() {
      this.sortField = "price";
      if (!this.sortMethod) {
        this.sortMethod = "desc";
      } else {
        this.sortMethod = this.sortMethod == "desc" ? "asc" : "desc";
      }
    },
    //获取数据
    async getData() {
      this.loading = true;
      //调用接口
      let res = await getGoods(this.query);
      if (res.result && res.result.items.length != 0) {
        this.goodslist = [...this.goodslist, ...res.result.items];
        //加页码
        this.query.page += 1;
      } else {
        //没得到数据  以及完成
        this.finished = true;
      }
      this.loading = false;
    },
    //设置品牌
    setBrand(id) {
      //保存点击的ID
      this.brandid = id;
      //请求数据
      this.query.page = 1;
      this.query.brandId = id;
      this.goodslist = [];
      this.getData();
    },
    //设置选择的属性
    setchangeattr(key, onename, twoname, twoid) {
      var obj = { groupName: onename, propertyName: twoname, id: twoid };
      //不要这么写 视图不更新
      // this.changeattr[key]=obj
      // console.log(this.changeattr)
      //这才是正确的语法
      this.$set(this.changeattr, key, obj);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/color.scss";
.subindex {
  width: 1240px;
}
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}
.active {
  color: $xtxColor;
}
.sortview {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    & > .radio {
      margin-left: 20px;
      input {
        display: none;
      }
      label {
        display: inline-block;
        width: 98px;
        height: 30px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 30px;
        color: #999;
      }
      input:checked + label {
        background: $xtxColor;
        color: #fff;
        border: none;
      }
    }
  }
  .left {
    display: flex;
    .pricesort {
      position: relative;
      margin-left: 20px;
      display: inline-block;
      width: 98px;
      height: 30px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 30px;
      color: #999;
      .arrow {
        position: absolute;
        border: 5px solid transparent;
        right: 5px;
      }
      .up {
        top: 4px;
        border-bottom-color: #bbb;
        .active {
          border-bottom-color: $xtxColor;
        }
      }
      .down {
        top: 16px;
        border-top: 5px solid #bbb;
        .active {
          border-top-color: $xtxColor;
        }
      }
    }
  }
}

.right {
  display: flex;
}
</style>